<template>
	<div class="borderAnimation">
		<h2>边框动画</h2>
		<div class="fo-Gray mt10">边框动画组件的实例和实现思路代码</div>
		
		<h3>类型1</h3>
		<example1 borderLightWidth='4'></example1>
		
		<h3>类型2</h3>
		<div class="mt20 flex flex-wrap">
			<example2 class="mr10 mb10"></example2>
			<example2 class="mr10" maskColor='#000'></example2>
			<example2 class="mr10" maskColor='#fff' bgColor='#fff' color="#000" loadingBorderColor1='transparent' loadingBorderColor2='transparent' aniDuration='2s' loadingBorderColor3='transparent' ></example2>
			<example2 class="mr10" maskColor='#000' loadingBorderColor1='transparent'  loadingBorderColor3='transparent'></example2>
			<example2 class="mr10" maskColor='#000' loadingBorderColor1='transparent'  loadingBorderColor3='transparent' borderLightWidth='6'></example2>
			<example2 class="mr10" maskColor='#fff' bgColor='#fff' color="#000" loadingBorderColor1='transparent'  loadingBorderColor3='transparent' borderLightWidth='6'></example2>
		</div>
		
		<h3>类型3</h3>
		<div class="mt20 flex flex-wrap">
			<example3 class="mr10 mb10" BorderRotateDeg='0deg'>旋转0deg</example3>
			<example3 class="mr10 mb10" aniDuration='2s'>旋转45deg && 加快动画速度</example3>
		</div>
		
		<h3>类型4</h3>
		<div class="mt20 flex flex-wrap">
			<example4 class="mr50 mb10" >悬浮出边框</example4>
			<example4 class="mr30 mb10" borderColor='#9fe1f0' borderWidth="2px">改变颜色和粗细</example4>
		</div>
	</div>
</template>

<script>
	import example1 from './components/example1.vue'
	import example2 from './components/example2.vue'
	import example3 from './components/example3.vue'
	import example4 from './components/example4.vue'
	export default {
		components:{example1,example2,example3,example4},
		name:"borderAnimation",
	}
</script>

<style>
</style>
